<template>
	<view>
		<view class="content">
			<uni-forms :model="address" ref="formRef">
				<!-- 表单内容 -->
				<uni-forms-item name="receiver" class="form-item">
					<text class="label">收货人</text>
					<input class="input" placeholder="请填写收货人姓名" v-model="address.address_name" />
				</uni-forms-item>
				<uni-forms-item name="contact" class="form-item">
					<text class="label">手机号码</text>
					<input class="input" placeholder="请填写收货人手机号码" :maxlength="11" v-model="address.phone" />
				</uni-forms-item>
				<uni-forms-item name="address" class="form-item">
					<text class="label">详细地址</text>
					<input class="input" placeholder="省、市、镇街道、楼牌号等信息" v-model="address.address_txt" />
				</uni-forms-item>
				<view class="form-item">
					<label class="label">设为默认地址</label>
					<switch @change="onSwitchChange" class="switch" color="#27ba9b" />
				</view>
			</uni-forms>
		</view>
		<!-- 提交按钮 -->
		<button @tap="onSubmit" class="button">保存并使用</button>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				address: {
					userId: 0,
					address_name: '', // 收货人
					phone: '', // 联系方式
					address_txt: '', // 详细地址
					isDefault: 0, // 默认地址，1为是，0为否
				}
			};
		},
		methods: {
			...mapMutations('user', ['get_addressList']),
			// 提交数据
			onSubmit() {
				console.log(JSON.stringify(this.address))
				this.address.userId = this.user.userId
				uni.request({
					url: 'http://localhost:3000/users/address',
					method: 'post',
					data: this.address,
					success: (res) => {
						console.log("添加成功:", res)
						this.get_addressList(this.user.userId)
						uni.navigateBack()
					},
					fail() {}
				});
			},
			// 切换默认地址
			onSwitchChange(e) {
				// console.log(e.detail.value)
				this.address.isDefault = e.detail.value ? 1 : 0;
			},

		},
		computed: {
			...mapState('user', ['user', 'addressList']),
		}
	}
</script>

<style lang="scss" scoped>
	// 深度选择器修改 uni-data-picker 组件样式
	:deep(.selected-area) {
		flex: 0 1 auto;
		height: auto;
	}

	page {
		background-color: #f4f4f4;
	}

	.content {
		margin: 20rpx 20rpx 0;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.form-item,
		.uni-forms-item {
			display: flex;
			align-items: center;
			min-height: 96rpx;
			padding: 25rpx 10rpx;
			background-color: #fff;
			font-size: 28rpx;
			border-bottom: 1rpx solid #ddd;
			position: relative;
			margin-bottom: 0;

			// 调整 uni-forms 样式
			.uni-forms-item__content {
				display: flex;
			}

			.uni-forms-item__error {
				margin-left: 200rpx;
			}

			&:last-child {
				border: none;
			}

			.label {
				width: 200rpx;
				color: #333;
			}

			.input {
				flex: 1;
				display: block;
				height: 46rpx;
			}

			.switch {
				position: absolute;
				right: -20rpx;
				transform: scale(0.8);
			}

			.picker {
				flex: 1;
			}

			.placeholder {
				color: #808080;
			}
		}
	}

	.button {
		height: 80rpx;
		margin: 30rpx 20rpx;
		color: #fff;
		border-radius: 80rpx;
		font-size: 30rpx;
		background-color: #27ba9b;
	}
</style>